<template>
  <view class="webview-container">
    <!-- 加载状态 -->
   <view v-if="loading" class="loading-container">
      <view class="loading-spinner"></view>
      <text class="loading-text">页面加载中...</text>
    </view>

    <!-- 错误状态-->
   <view v-else-if="loadError" class="error-container">
      <view class="error-icon">⚠</view>
      <text class="error-title">加载失败</text>
      <text class="error-desc">{{ errorMessage }}</text>
      <view class="error-actions">
        <button class="retry-btn" @click="retryLoad">重新加载</button>
        <button class="back-btn" @click="goBack">返回</button>
      </view>
    </view>

    <!-- Web内容区域 -->
    <view class="web-content">
      <web-view 
        v-if="webUrl" 
        :src="webUrl" 
        class="web-view"
        @message="onWebViewMessage"
        @load="onWebViewLoad"
        @error="onWebViewError"
      ></web-view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'WebviewPage',
  data() {
    return {
      webUrl: '',
      pageTitle: '',
      loading: true,
      loadError: false,
      errorMessage: '',
      loadStartTime: 0
    }
  },
  
  onLoad(options) {
    // 获取传入的URL参数
    console.log('webview options', options);
    if (options.url) {
      this.webUrl = decodeURIComponent(options.url);
	  console.log('web--',this.webUrl)
    }
    
    // 获取页面标题并设置导航栏标题
    if (options.title) {
      this.pageTitle = decodeURIComponent(options.title);
      // 设置导航栏标题
      uni.setNavigationBarTitle({
        title: this.pageTitle
      });
    }
    
    // 设置加载超时
    this.setLoadTimeout();
    
    // 记录加载开始时间
    this.loadStartTime = Date.now();
  },
  
  onShow() {
    // 页面显示时的处理
    if (this.loadError) {
      this.resetErrorState();
    }
  },
  
  methods: {
    // 设置加载超时
    setLoadTimeout() {
      setTimeout(() => {
        if (this.loading && !this.loadError) {
          this.loadError = true;
          this.errorMessage = '页面加载超时，请检查网络连接';
          this.loading = false;
        }
      }, 30000); // 30秒超时
    },
    
    // 重置错误状态
    resetErrorState() {
      this.loadError = false;
      this.errorMessage = '';
      this.loading = true;
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    
    // 刷新页面
    refreshPage() {
      this.resetErrorState();
      this.setLoadTimeout();
      
      // 重新加载页面
      if (this.webUrl) {
        // 对于web-view，重新设置URL来刷新
        const currentUrl = this.webUrl;
        this.webUrl = '';
        this.$nextTick(() => {
          this.webUrl = currentUrl;
        });
      }
    },
    
    // 在浏览器中打开
    openInBrowser() {
      if (this.webUrl) {
        // #ifdef H5
        window.open(this.webUrl, '_blank');
        // #endif
        
        // #ifdef MP-WEIXIN
        uni.showModal({
          title: '提示',
          content: '是否复制链接到剪贴板？',
          success: (res) => {
            if (res.confirm) {
              uni.setClipboardData({
                data: this.webUrl,
                success: () => {
                  uni.showToast({
                    title: '链接已复制',
                    icon: 'success'
                  });
                }
              });
            }
          }
        });
        // #endif
        
        // #ifdef APP-PLUS
        plus.runtime.openURL(this.webUrl);
        // #endif
      }
    },
    
    // 重试加载
    retryLoad() {
      this.refreshPage();
    },
    
    // iframe加载完成（H5环境）
    onIframeLoad() {
      this.loading = false;
      this.loadError = false;
      console.log('iframe加载完成');
    },
    
    // iframe加载错误（H5环境）
    onIframeError() {
      this.loading = false;
      this.loadError = true;
      this.errorMessage = '页面加载失败，请检查网络连接';
      console.error('iframe加载失败');
    },
    
    // web-view加载完成
    onWebViewLoad() {
      this.loading = false;
      this.loadError = false;
      console.log('web-view加载完成');
    },
    
    // web-view加载错误
    onWebViewError(e) {
      this.loading = false;
      this.loadError = true;
      this.errorMessage = '页面加载失败，请检查网络连接';
      console.error('web-view加载失败:', e);
    },
    
    // web-view消息处理
    onWebViewMessage(e) {
      console.log('web-view消息:', e.detail);
      // 可以在这里处理来自web页面的消息
    }
  }
}
</script>

<style lang="less" scoped>
.webview-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.loading-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  
  .loading-spinner {
    width: 80rpx;
    height: 80rpx;
    border: 6rpx solid #f3f3f3;
    border-top: 6rpx solid #007aff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 30rpx;
  }
  
  .loading-text {
    font-size: 28rpx;
    color: #666;
  }
}

.error-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 60rpx;
  
  .error-icon {
    font-size: 120rpx;
    color: #ff6b6b;
    margin-bottom: 30rpx;
  }
  
  .error-title {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .error-desc {
    font-size: 28rpx;
    color: #666;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 60rpx;
  }
  
  .error-actions {
    display: flex;
    gap: 30rpx;
    
    .retry-btn,
    .back-btn {
      padding: 20rpx 40rpx;
      border-radius: 50rpx;
      font-size: 28rpx;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
      
      &:active {
        transform: scale(0.95);
      }
    }
    
    .retry-btn {
      background: #007aff;
      color: #ffffff;
    }
    
    .back-btn {
      background: #f0f0f0;
      color: #666;
    }
  }
}

.web-content {
  flex: 1;
  position: relative;
  background: #ffffff;
  
  .web-iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
  
  .web-view {
    width: 100%;
    height: 100%;
  }
}

.bottom-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20rpx 0;
  background: #ffffff;
  border-top: 1rpx solid #e5e5e5;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
  
  .toolbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 10rpx 20rpx;
    border-radius: 8rpx;
    
    &:active {
      transform: scale(0.9);
      background: #f0f0f0;
    }
    
    .toolbar-icon {
      font-size: 36rpx;
      color: #C6282B;
      margin-bottom: 8rpx;
    }
    
    .toolbar-text {
      font-size: 22rpx;
      color: #666;
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

// 响应式设计
@media (max-width: 750rpx) {
  .bottom-toolbar {
    padding: 16rpx 0;
    
    .toolbar-item {
      .toolbar-icon {
        font-size: 32rpx;
      }
      
      .toolbar-text {
        font-size: 20rpx;
      }
    }
  }
}
</style> 